<template>
    <el-container class="elTb" style="height: 100%;width: 100px;">
        <el-header style="position: fixed;z-index: 9;width: 100%">
            <h1 class="title">
                        <span style="color: #5f5b5b">
                            当前位置 ：
                        </span>
                <span v-if="fromDi" @click="to(DiPage)" style="cursor:pointer">通信调查数据入库<i
                        class="el-icon--right el-icon-right"></i></span>
                <span v-else-if="fromHome" @click="to(HomePage)" style="cursor:pointer">通信数据调查<i
                        class="el-icon--right el-icon-right"></i></span>
                <span v-else @click="to(QcPage)" style="cursor:pointer">通信数据质检<i
                        class="el-icon--right el-icon-right"></i></span>
                通信电视塔数据
            </h1>
        </el-header>
        <el-main style="background: #F0F0F066;margin-top:45px">
            <el-row>
                <el-col :span="24">
                    <el-row :gutter="10">
                        <el-card>
                            <h1 style="font-size: 1.4em">通信电视塔数据检查</h1>
                            <el-tabs v-model="activeName" @tab-click="handleClick">
                                <el-tab-pane :label="subTask.subName" v-for="(subTask,index) in subTasks"
                                             :key="index">
                                    <correspond-tower-table :table-data="tableData" @updateData="updateData"
                                                            :cur-page="curPage"/>
                                </el-tab-pane>
                            </el-tabs>
                            <el-divider></el-divider>
                            <admin-page :page-size="pageSize" ref="adminPage" @updateData="updateData"
                                        :total="total" @currentChange="currentChange"/>
                        </el-card>
                        <el-card style="height: 60px" v-if="canEdit">
                            <el-col :span="5">
                                <h1 style="font-size: 1.4em">新增通信电视塔数据</h1>
                            </el-col>
                            <el-col :span="4" :push="1">
                                <el-upload
                                        class="upload-demo"
                                        ref="uploadNode"
                                        name="nodeFile"
                                        action="777"
                                        drag
                                        :file-list="fileList"
                                        :limit="1"
                                        :auto-upload="true"
                                        :http-request="uploadNodeFile">
                                    <div class="el-button--primary" v-loading.fullscreen.lock="fullscreenLoading"
                                         style="height: 100%;font-weight: 500;font-size: 12px;padding: 7px 14px;">批量添加
                                    </div>
                                </el-upload>
                            </el-col>
                            <el-col :span="4" :push="1">
                                <el-button class="el-button--primary el-button--mini" @click="dialogVisible = true">
                                    单个添加
                                </el-button>
                            </el-col>
                            <tips-dialog @yes="addSuccess" :dialog-visible="dialogVisible2"
                                         :msg="msg"></tips-dialog>
                        </el-card>
                    </el-row>
                </el-col>
            </el-row>
        </el-main>
        <el-footer>
            <el-dialog
                    title="新增通信电视塔数据"
                    :visible.sync="dialogVisible"
                    width="48%"
                    v-if="dialogVisible"
                    :before-close="handleClose">
                <new-correspond-tower :sid="sid" ref="CorrespondTower" @updateData="updateData"/>
                <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitForm" v-loading.fullscreen.lock="fullscreenLoading">保 存</el-button>
    </span>
            </el-dialog>
        </el-footer>
    </el-container>
</template>

<script>
    import CorrespondTowerTable from "../../../../components/admin/table/correspond/CorrespondTowerTable";
    import NewCorrespondTower from "../../../../components/admin/form/NewCorrespondTower";
    import TipsDialog from "../../../../components/admin/menu/TipsDialog";
    import AdminPage from "../../../../components/admin/menu/AdminPage";
    import qs from "qs";

    export default {
        name: "CorrespondTowerQc",
        components: {
            CorrespondTowerTable,
            NewCorrespondTower,
            TipsDialog,
            AdminPage
        },
        data() {
            return {
                id: '',
                activeName: '0',
                msg: '添加完成',
                dialogVisible: false,
                dialogVisible2: false,
                tableData: [],
                HomePage: 'CorrespondTl',
                QcPage: 'CorrespondQc',
                DiPage: 'CorrespondDi',
                beginPos: '',
                curPage: 1,
                pageCount: 6,
                pageSize: 10,
                total: 0,
                subTasks: [],
                sid: -1,
                title: '',
                fileData: '',  // 文件上传数据（多文件合一）
                fileList: [],
                fullscreenLoading: false,
                fromHome: true,
                fromDi: true,
                canEdit: true
            }
        },
        mounted() {
            if (this.$route.params.id !== undefined) {
                this.id = this.$route.params.id;
                axios.post("/bjdzms/releaseTask/findById",
                    qs.stringify({
                        'id': this.id
                    })).then(res => {
                    this.subTasks = res.data.releaseSubtaskList;
                    let sid = res.data.releaseSubtaskList.length > 0 ? res.data.releaseSubtaskList[0].id : -1;
                    this.updateData(1, sid);
                    if (res.data.state !== 7) {
                        this.canEdit = true;
                    } else {
                        this.canEdit = false;
                    }
                });
                if (this.$route.params.di !== undefined) {
                    this.fromDi = true;
                } else {
                    this.fromDi = false;
                    this.fromHome = true;
                }
            } else {
                if (JSON.parse(this.$store.state.cCurData) !== null && JSON.parse(this.$store.state.cCurData).releaseSubtaskList.length > 0) {
                    this.sid = JSON.parse(this.$store.state.cCurData).releaseSubtaskList[0].id;
                    this.subTasks = JSON.parse(this.$store.state.cCurData).releaseSubtaskList;
                }
                this.fromDi = false;
                this.fromHome = false;
            }
            this.updateData(this.curPage);
        },
        methods: {
            handleClick(tab) {
                this.sid = this.subTasks[tab.index].id;
                this.updateData(1);
            },
            addSuccess() {
                this.updateData();
                this.fileList = [];
                this.dialogVisible2 = false;
            },
            uploadNodeFile(file) {
                this.fullscreenLoading = true;
                this.fileData = new FormData();
                this.fileData.append('file', file.file);
                this.fileData.append('sid', this.sid);
                axios.post('/bjdzms/correspondTvTower/upExcel',
                    this.fileData,
                ).then(res => {
                    if (res.status === 200) {
                        this.fullscreenLoading = false;
                        this.dialogVisible2 = true;
                    }
                });
            },
            // 上传前对文件的大小和类型的判断
            beforeAvatarUpload(file) {
                this.form.fileName = file.name;
                const extension = file.name.split(".")[1] === "xls";
                const extension2 = file.name.split(".")[1] === "xlsx";
                const extension3 = file.name.split(".")[1] === "txt";
                if (!extension && !extension2 && !extension3) {
                    this.$message({
                        message: '上传文件只能是 xls、xlsx、txt 格式!',
                        type: 'error'
                    });
                }
                return extension || extension2 || extension3;
            },
            currentChange(curPage) {
                this.updateData(curPage);
            },
            updateData(curPage, sid) {
                this.pageSize = this.$refs.adminPage.pageSize;
                this.curPage = curPage === undefined ? this.curPage : curPage;
                this.sid = sid === undefined ? this.sid : sid;
                axios.get("/bjdzms/correspondTvTower/findAllBySid",
                    {
                        params: {
                            'page': this.curPage,
                            'rows': this.pageSize,
                            'sid': this.sid
                        }
                    }).then(res => {
                    this.tableData = [];
                    this.tableData = res.data.rows;
                    this.beginPos = res.data.beginPos;
                    this.currPage = res.data.currPage;
                    this.pageCount = res.data.pageCount;
                    this.total = res.data.total;
                });
                this.dialogVisible = false;
                this.fullscreenLoading = false;
            },
            to(path) {
                this.$router.push({name: path});
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            submitForm() {
                this.$refs.CorrespondTower.submitForm();
                this.fullscreenLoading = true;
            },
            onCancel(form) {
                this.$refs.uploadNode.clearFiles();
                this.dialogVisible2 = false;
            }
        }
    }
</script>
<style>
    .elTb .upload-demo {
        width: 100px !important;
    }

    .el-footer {
        height: 0 !important;
    }

    .elTb .el-upload-dragger {
        width: 85px;
        height: 30px !important;
    }
</style>
<style scoped>
    .el-header {
        background: #EBEBEB;
        color: #e5e9ef;
        font-size: 2em;
        line-height: 80px;
        border: 5px solid #EBEBEB;
    }

    .el-main {
        background: #fff;
    }

    .el-container {
        height: 100%;
    }

    .el-form-item {
        width: 610px;
    }

    .title {
        font-size: 14px;
        color: #97a8be;
        font-weight: 400 !important;
    }
</style>
